<template>
 
    <a-button type="primary" title="添加涉及词语" size="small" @click="openModal">
      <template #icon>
        <PlusOutlined />
      </template>
    </a-button>

    <a-modal
      :width="'60%'"
      v-model:open="open"
      title="Create Relationship"
      @ok="ok"
      :maskClosable="false"
    >
      <PmpItemSearch
        @selected="selectReferPmpItem"
        :placeholder="'请选择涉及词语'"
      ></PmpItemSearch>
    </a-modal>

</template>

<script setup>
import { PlusOutlined } from "@ant-design/icons-vue";
import CONSTANTS from "@/constants/Constants.js";
import PmpItemSearch from "@/components/PmpItemSearch.vue";
import { messageApi, contextHolder } from "@/utils/MessageUtils.js";

import pmpHooks from "@/hooks/PmpHooks.js";
import { ref } from "vue";

const props = defineProps({
  // 主pmpItem的id
  id: {
    type: String,
    default: () => "",
  },
  cb: {
    type: Function,
    default: () => {},
  },
});

const open = ref(false);
function closeModal() {
  open.value = false;
}

function openModal() {
  // console.log('=====', props.id)
  // console.log('=====', data.value)
  open.value = true;
}

function selectReferPmpItem(item) {
  // alert(item.id)
  relaId.value = item.id;
}

const relaId = ref("");

async function createRefer() {
  const res = await pmpHooks.addPmpRefer(props.id, relaId.value);
  // alert(JSON.stringify(res))
  if (res.code == "200") {
    messageApi.success("Create relationship success");
    if (props.cb) {
      props.cb();
    }
    closeModal();
  } else {
    messageApi.error("Create relationship failed");
  }
}

function ok() {
  createRefer();
  closeModal();
}
</script>

<style>
</style>